<template>
  <div class="home">
    <nav-bar>
      <div class="left" slot="left">
        <a class="dd1" href="">大标题</a>
      </div>
      <div class="right" slot="right">
        <a class="dd2" href="">用户图标</a>
      </div>
    </nav-bar>

    <side-bar class="menu">
    </side-bar>


    <div class="content">
      <router-view></router-view>
    </div>

  </div>
</template>

<script>
  import NavBar from "../../components/common/navbar/NavBar";
  import SideBar from "../../components/common/sidebar/SideBar";
  export default {
    name: "Home",
    components: {
      SideBar,
      NavBar

    },
    data() {
      return {
        menu: ['依赖', '用户'] //修改了菜单栏
      }
    },
    created() {
      //请求多个数据


    },

    computed: {

    },
    activated() {

    },
    deactivated() {

    },
    methods: {

      //网络请求相关方法

    },
  }
</script>

<style scoped>
  * {
    /* 清除默认的内外边距 */
    margin: 0;
    padding: 0;
  }

  .nav-bar {
    /* #nav标签样式设计 */
    width: 100%;
    height: 100px;
    background: #494A5F;
    font-weight: bold;
    /* display: flex; */
    /* justify-content: center; */
  }

  a {
    display: block;
    text-decoration: none;
    height: 90px;
  }

  a:link,
  a:visited {
    color: #D3D3D3;
  }
.dd1{
  margin-left: 50px;
}

.dd2{
  margin-left: 300px;
}
  .right {
    flex: 1;
  }

  .menu {
    position: absolute;
    margin-top: 10vh;
    height: calc(100% - 10vh);
    width: 20vw;
  }

  .content {
    position: absolute;
    margin-top: 10vh;
    margin-left:20vw;
    width: 100%;
    height: calc(100% - 10vh);
    background: gainsboro;
    /* background: linear-gradient(45deg, #98cbff, #98ffcb); */
  }
</style>